<template>
  <div>
    <van-nav-bar title="商品管理" left-arrow  @click-left="toGoodsManager" >
        <template #left>
            <img src="../../../assets/back.png" alt="" class="back">
        </template>
    </van-nav-bar>
    <!-- tab栏 -->
    <div class="tabs-title">
        <div class="title">
            <div @click="toOrderList">待发货</div>
            <div @click="toGoodsManager">商品管理</div>
            <div class="active">1314义乌小镇</div>
        </div>
    </div>
    <div class="goods">
        <div class="left-nav">
            <div
            class="nav-item"
            :class="activeIndx == index ? 'active' : ''"
            v-for="(item, index) in navlist"
            :key="index"
            @click="tabchange(index, item)"
            >
            {{ item.category }}
            </div>
        </div>
        <div class="content-box">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <div
                    class="goods-item"
                    v-for="(item, index) in list"
                    :key="index"
                    @click="handlerDetails(item.id)"
                    >
                    <div class="goods-box">
                        <div class="goods-img">
                            <img :src="item.image" />
                        </div>
                        <div class="goods-info">
                            <div class="name">{{ item.name }}</div>
                            <div class="price">
                                <span> ¥{{ item.price }}</span>
                                <div class="join-library" @click.stop="joinToLibrary(item.id)">加入选品库</div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>
    </div>
  </div>
</template>

<script>
import { getCategory,getGoodsByCategory,joinToLibrary } from "@/api/api";
import { Dialog } from 'vant';
export default {
    data(){
        return {
            navlist:[],
            list:[],
            activeIndx: 0,
            shop_id:1,
            role:7,
            goodsPage: 0,
            categoryPage:1,
            show:false,
            loading:false,
            finished:false,
        }
    },
    mounted(){
        this.getCategory()
    },
    methods:{
        toOrderList(){
            this.$router.push("/orderList");
        },
        toGoodsManager(){
            this.$router.push("/goodsManager");
        },
        onLoad(){
            if(this.navlist.length > 0){
                this.getGoodsByCategory(this.navlist[this.activeIndx].category,this.goodsPage)
            }
        },
        getCategory(){
            getCategory({page:this.page}).then(res=>{
                this.navlist = res.data.data.data
                this.finished = false
                // if(this.navlist[0]){
                //     this.getGoodsByCategory(this.navlist[0].category)
                // }
                this.onLoad()
            })
        },
        getGoodsByCategory(category,goodsPage = 0){
            if(goodsPage == 0){
                this.list = []
                this.finished = false
                this.loading = true
            }
            goodsPage++
            this.goodsPage = goodsPage
            getGoodsByCategory({category,page:goodsPage}).then(res=>{
                this.list = this.list.concat(res.data.data.data)
                this.loading = false;
                if(res.data.data.total <= this.list.length){
                    this.finished = true
                }
            })
        },
        tabchange(index,item){
            this.activeIndx = index
            this.getGoodsByCategory(item.category)
        },
        handlerDetails(goodsId){
            this.$router.push({
                name:"supplierGoodsDetail" ,
                query:{goodsId}
            })
        },
        joinToLibrary(goods_id){
            Dialog.confirm({
                title: '确认选择该商品加入选品库',
            })
            .then(() => {
                joinToLibrary({shop_id:this.shop_id,goods_id,role:this.role}).then(res=>{
                    if(res.data.code != 1){
                        Dialog.alert({
                            title: res.data.msg,
                            confirmButtonText:'我知道了'
                        }).then(() => {
                        });
                    }
                })
            })
            .catch(() => {
            });
        }

    }
}
</script>

<style scoped>
div {
    box-sizing: border-box;
}
.back {
    height: 22px;
}
.tabs-title {
    margin: 10px 10px 0 10px;
    height: 45px;
    box-shadow: 0 0 15px 10px #f8f8f8;
    border-radius: 10px;
}
.tabs-title .title {
    padding: 10px;
    display: flex;
    padding-bottom: 15px;
}
.tabs-title .title div {
    flex: 1;
    text-align: center;
}
.tabs-title .title .active {
    color: #FA382B;
    position: relative;
}
.tabs-title .title .active::after{
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 65px;
    height: 2px;
    background-color: #FA382B;
}


.goods {
    margin: 10px 10px 0 10px;
    background-color: #F8F8F8;
    display: flex;
    padding: 10px;
    padding-right: 0;
    height: calc(100vh - 111px);
}
.left-nav {
    width: 72px;
    text-align: center;
    height: 100%;
    overflow: scroll;
}
.left-nav::-webkit-scrollbar {display: none;}
.nav-item {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
    margin-bottom: 30px;
}
.nav-item.active {
    color: #fb7647;
    font-size: 16px;
}
.content-box {
    width: calc(100% - 72px);
    margin-left: 10px;
    height: 100%;
    overflow: scroll;
}
.content-box::-webkit-scrollbar {display: none;}
.goods-item {
    border-radius: 6px;
    height: 90px;
    width: 100%;
    background-image: linear-gradient( to bottom , #FDF5F5 , #ffffff);
    padding: 10px;
    margin-bottom: 10px;
    position: relative;
    font-size: 14px;
}
.goods-box {
  height: 77px;
  display: flex;
}
.goods-img {
  width: 70px;
    margin-right: 10px;
}
.goods-img img {
  width: 70px;
  height: 70px;
}
.goods-info {
    height: 70px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.goods-box .name {
    color: #4A4949;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.goods-box .price{
    color: #FB5B50;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 26px;
    line-height: 26px;
}
.goods-box .join-library{

    width: 100px;
    color: #FB5B50;
    border: 1px solid #FB5B50;
    height: 100%;
    border-radius: 15px;
    background-color: #FDE8E6;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>